<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org"
      layout:decorator="backstage/layout">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
    <title>管理后台</title>
</head>

<body>
<div id="content" layout:fragment="content">

    <script type="text/javascript">

		function paging(page){
		    $("[name=page]").val(page);
		    $("#searchForm").submit();
		}
        $(function(){
        	
            var options = {
                    currentPage: $("[name=page]").val(),
                    totalPages: $("[name=totalPage]").val(),
                    alignment:"left",
                    itemTexts: function (type, page, current) {
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "末页";
                            case "page":
                                return page;
                        }
                    },
                    pageUrl: function(type,page,current){
                        return "javascript:paging('"+page+"');";
                    }
                }
                $('#example').bootstrapPaginator(options);
             $(".btn-danger").click(function(e){
                if(confirm("确定删除吗?"))
                {
                    $.ajax({
                        url:'/sysUser/delete.json?id='+ e.currentTarget.id,
                        type:'POST',
                        dataType:"json",
                        success:function(date) {
                            if(date.obj){
                                $(".close").click();
                                alert("删除成功！");
                                window.location.href = "/sysUser/list.htm";
                            }else{
                               alert("删除有误！");
                                window.location.href = "/sysUser/list.htm";
                            }
                        }
                    });
                }
            }); 
            
            //选中查询前的状态
            $("#userStatus option[value="+$('#status_value').val()+"]").prop("selected", "true");
            
            $('.editLanguageBT').click(function(e){
                e.preventDefault();
                $(".error").removeClass().addClass("control-group");
                $(".help-inline").remove();
                $("#edit_userName").val($("#userName-"+e.currentTarget.id).val());
                $("#edit_phone").val($("#phone-"+e.currentTarget.id).val());
                $("#edit_email").val($("#email-"+e.currentTarget.id).val());
                $("#edit_roleId option[value="+$("#roleId-"+e.currentTarget.id).val()+"]").prop("selected", "true");
                if($("#userStatus-"+e.currentTarget.id).val()==0){
                	document.getElementById("edit_userStatus1").checked=true;
                } else{
                	document.getElementById("edit_userStatus2").checked=true;
                }
                if($("#roleId-"+e.currentTarget.id).val()==2){
        			$("#edit_team_div").show();
        			$("#edit_teamId option[value="+$("#teamId-"+e.currentTarget.id).val()+"]").prop("selected", "true");
        		} else{
        			$("#edit_team_div").hide();
        		}
                
                $("#edit_id").val(e.currentTarget.id);
                $('#editModel').modal('show');
            });

            //添加用戶前
            $(".btn-setting").click(function(e){
                $(".error").removeClass().addClass("control-group");
                $(".help-inline").remove();
                $("#add_userName").val('');
                $("#add_phone").val('');
                $("#add_email").val('');
                $("#add_loginName").val('');
                $("#add_password").val('');
                $("#add_roleId").val("");
                $("#add_team_div").hide();
                document.getElementById("add_userStatus1").checked=true;

            })
            $("#updateSysUser").validate( {
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,
                rules : {
                	userName : {
                        required: true,
                        maxlength:20
                    },
                    phone : {
                        required: true,
                        maxlength:11,
                        isMobile:true
                    },
                    email : {
                        required: true,
                        maxlength:40,
                        isEmail:true
                    },
                    roleId : {
                        required: true
                    }
                },
                messages : {
                	userName : {
                        required : "必须填写",
                        maxlength : "最多输入20个字符",
                        phone:true
                    },
                    phone : {
	                    required : "必须填写",
	                    maxlength : "最多输入11个字符",
	                    isMobile:"手机号码格式有误"
	                },
	                email : {
	                    required : "必须填写",
	                    maxlength : "最多输入40个字符",
	                    isEmail:"邮箱格式有误"
	                },
	                roleId : {
	                    required : "必须选择"
	                }
                },
                submitHandler : function(form) {
					if($("#edit_roleId").val() == 2){
						if($("#edit_teamId").val() == ""){
							alert("请选择球队!");
							return false;
						}
					}
                	$("#updateSysUser").ajaxSubmit(function(date,res,me){
                        if(date.suc){
                            alert("修改成功了！");
                            $(".close").click();
                            window.location.href = "/sysUser/list.htm";
                        } else{
                        	alert("修改失败了！"+date.msg);
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            });
            
            $("#addSysUser").validate( {
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,
                rules : {
                	userName : {
                        required: true,
                        maxlength:20
                    },
                    loginName : {
                    	required: true,
                    	maxlength:40,
                        remote:{
                            url: "/sysUser/checkLoginName.json",
                            type: "post",
                            data:{
                                loginName: function(){return $("#add_loginName").val();}
                            }
                        }
                    },
                    password : {
                    	required: true,
                    	maxlength:40
                    },
                    phone : {
                        required: true,
                        maxlength:11,
                        isMobile:true
                    },
                    email : {
                        required: true,
                        maxlength:40,
                        isEmail:true
                    },
                    roleId : {
                        required: true
                    }
                },
                messages : {
                	userName : {
                        required : "必须填写",
                        maxlength : "最多输入20个字符"
                    },
                    loginName : {
                    	required : "必须填写",
                    	maxlength:"最多输入40个字符",
                        remote: "输入的登录名已存在"
                    },
                    password : {
                    	required : "必须填写",
                    	maxlength:"最多输入40个字符"
                    },
                    phone : {
	                    required : "必须填写",
	                    maxlength : "最多输入11个字符",
	                    isMobile:"手机号码格式有误"
	                },
	                email : {
	                    required : "必须填写",
	                    maxlength : "最多输入40个字符",
	                    isEmail:"邮箱格式有误"
	                },
	                roleId : {
	                    required : "必须选择"
	                }
                },
                submitHandler : function(form) {
                	if($("#add_roleId").val() == 2){
						if($("#add_teamId").val() == ""){
							alert("请选择球队!");
							return false;
						}
					}
                    $("#addSysUser").ajaxSubmit(function(date,res,me){
                        if(date.suc){
                            alert("保存成功了！");
                            window.location.href = "/sysUser/list.htm";
                        } else{
                        	alert("保存失败了！"+date.msg);
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            });
            
            $(".btn-inverse").click(function(e){
                $("#page").attr("value","1");
            })
        });
        
        function seleRole(me,n){
        	if(me == 2){
        		if(n==1){
        			$("#add_team_div").show();
        		} else if(n ==2){
        			$("#edit_team_div").show();
        		}
        	}else{
        		$("#add_team_div").hide();
        		$("#edit_team_div").hide();
        	}
        }
    </script>
    <div class="box-content">
        <div class="row-fluid sortable">
            <div class="box span12">
                <h3 class="row-fluid header smaller lighter blue">
                   <span class="label label-large label-pink arrowed-right">用户管理</span>
                </h3>
                <h3 class="row-fluid header smaller lighter blue" style="border:none;">
                    <a href="#" class="btn btn-small btn-success btn-setting" data-toggle="modal" data-target="#myModal"><i class="icon-user"></i>新建用户</a>
                </h3>
                
                <form action="/sysUser/list.htm" method="post" id="searchForm" style="margin-left:10px;">
		            <input type="hidden"  id="page" name="page" th:value="${page.page}" />
		            <input type="hidden"  name="totalPage" th:value="${page.totalPage}" />
		            <input type="hidden" id="myUserId" th:value="${session.myUserId}" />
		            
		            <input type="hidden" id="status_value" th:value="${page.filter[userStatus]}" />
		            	<span class="topword">用户名称：</span><input type="text" class="input-xlarge focused" name="userName" th:value="${page.filter[userName]}"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		            	<span class="topword">用户状态：</span>
		            			<select name="userStatus" id="userStatus">
		            				<option value="">全部</option>
		            				<option value="0">开启</option>
		            				<option value="1">关闭</option>
		            			</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		            <input type="submit" class="btn btn-info btn-inverse tpbtn" value="搜索"/>				
		        </form>
        
                <div class="box-content">
                    <table class="table table-striped table-bordered bootstrap-datatable datatable">
                        <thead>
                        <tr >
                           
                            <th style="text-align: center;">序号</th>
                            <th style="text-align: center;">用户名称</th>
                            <th style="text-align: center;">登录名UID</th>
                            <th style="text-align: center;">用户状态</th>
                            <th style="text-align: center;">创建时间</th>
                            <th style="text-align: center;">操作管理</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="user:${page.result}">
                        	<td th:text="${user.id}" style="text-align: center;"></td>
                            <td th:text="${user.userName}" style="text-align: center;"></td>
                            <td th:text="${user.loginName}" style="text-align: center;"></td>
                            <td  style="text-align: center;">
                              <span th:if="${user.userStatus == '0'}">开启</span>
                              <span th:if="${user.userStatus == '1'}">关闭</span>
                            </td>
                            <td th:text="${user.createTime}" style="text-align: center;"></td>
                            <td style="text-align: center;">
                                 <a class="deletebtn btn btn-small btn-danger" th:id="${user.id}" style="width: 26px;">
                                    删除
                                   
                                </a> 
                                 <a class="editbtn btn btn-info btn-small editLanguageBT" th:id="${user.id}" style="width: 26px;">
                                  
                            编辑 
                                                                                                                     
                                </a>
                                
                            <input type="hidden" th:id="'userName-'+${user.id}" th:value="${user.userName}"/>
                            <input type="hidden" th:id="'loginName-'+${user.id}" th:value="${user.loginName}"/>
                            <input type="hidden" th:id="'password-'+${user.id}" th:value="${user.password}"/>
                            <input type="hidden" th:id="'phone-'+${user.id}" th:value="${user.phone}"/>
                            <input type="hidden" th:id="'email-'+${user.id}" th:value="${user.email}"/>
                            <input type="hidden" th:id="'userStatus-'+${user.id}" th:value="${user.userStatus}"/>
                            <input type="hidden" th:id="'createTime-'+${user.id}" th:value="${user.createTime}"/>
                            <input type="hidden" th:id="'createUser-'+${user.id}" th:value="${user.createUser}"/>
                            <input type="hidden" th:id="'updateTime-'+${user.id}" th:value="${user.updateTime}"/>
                            <input type="hidden" th:id="'updateUser-'+${user.id}" th:value="${user.updateUser}"/>
                            <input type="hidden" th:id="'roleId-'+${user.id}" th:value="${user.roleId}"/>
                            <input type="hidden" th:id="'teamId-'+${user.id}" th:value="${user.teamId}"/>
                                
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div style="margin-bottom: 0px; margin-left: auto;margin-right: auto">
		                <div id="example" style="margin-bottom:0px"></div>
		            </div>
                </div>
            </div><!--/span-->
        </div><!--/row-->
    </div>
    <div id="myModal" class="modal hide fade in">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">×</button>
            <h3>新增用户</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" action="/sysUser/addOrUpdate.json" method="post" id="addSysUser">
            <fieldset>
                <div class="modal-body">
                    <div class="control-group">
                        <label class="control-label">用户名称：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="userName" id="add_userName"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">登录名UID：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="loginName" id="add_loginName"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">登录密码：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="password" value="" name="password" id="add_password"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">手机：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="phone" id="add_phone" maxlength="11"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">邮箱：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="email" id="add_email"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">选择角色：</label>
                        <div class="controls">
			                 <select name="roleId" id="add_roleId" onchange="seleRole(this.value,1)">
			                    <option value="" selected="selected">--请选择--</option>
			                    <option th:each="sysRole:${sysRoleList}" th:value="${sysRole.id}" th:text="${sysRole.roleName}" ></option>
			                 </select>
                        </div>
                    </div>
                    
                    <div class="control-group" style="display: none" id="add_team_div">
                        <label class="control-label">选择球队：</label>
                        <div class="controls">
			                 <select name="teamId" id="add_teamId">
			                    <option value="" selected="selected">--请选择--</option>
			                    <option th:each="team:${teamList}" th:value="${team.id}" th:text="${team.name}" ></option>
			                 </select>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">用户状态：</label>
                        <div class="controls" style="margin-top: 5px;">
                            	<input class="input-xlarge focused"  type="radio" value="0" name="userStatus" id="add_userStatus1" checked="true"/>开启	
                            	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            	<input class="input-xlarge focused"  type="radio" value="1" name="userStatus" id="add_userStatus2"/>关闭	
                        </div>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary btn-small" value="保存" />
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
    
    
    <div id="editModel" class="modal hide fade in" style="display: none;">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">×</button>
            <h3>编辑用户</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" action="/sysUser/addOrUpdate.json" method="post" id="updateSysUser">
             <input id="edit_id" name="id" type="hidden"/>
            <fieldset>
                <div class="modal-body">
                
                	<div class="control-group">
                        <label class="control-label">用户名称：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="userName" id="edit_userName"/>
                        </div>
                    </div>
                    
                   <div class="control-group">
                        <label class="control-label">手机：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="phone" id="edit_phone" maxlength="11"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">邮箱：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="email" id="edit_email"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">选择角色：</label>
                        <div class="controls">
			                 <select name="roleId" id="edit_roleId" onchange="seleRole(this.value,2)">
			                    <option value="" selected="selected">--请选择--</option>
			                    <option th:each="sysRole:${sysRoleList}" th:value="${sysRole.id}" th:text="${sysRole.roleName}" ></option>
			                 </select>
                        </div>
                    </div>
                    
                    <div class="control-group" style="display: none" id="edit_team_div">
                        <label class="control-label">选择球队：</label>
                        <div class="controls">
			                 <select name="teamId" id="edit_teamId">
			                    <option value="" selected="selected">--请选择--</option>
			                    <option th:each="team:${teamList}" th:value="${team.id}" th:text="${team.name}" ></option>
			                 </select>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">用户状态：</label>
                        <div class="controls" style="margin-top: 5px;">
                            	<input class="input-xlarge focused"  type="radio" value="0" name="userStatus" id="edit_userStatus1" checked="true"/>开启	
                            	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            	<input class="input-xlarge focused"  type="radio" value="1" name="userStatus" id="edit_userStatus2"/>关闭	
                        </div>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary btn-small" value="保存" />
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
</div>
</body>
</html>
